// 数据渲染
$.getJSON('../mock/AbeautyMakeup.json', function(data) {
    // 1.初始化页面
    showPage(data[0].ABeautyMakeup);
    // 2.鼠标mouseover时数据和样式进行改变
    // 默认样式

    $('.filter-sort .mr').click(function() {
        if ($('.xiaot').hasClass('jiah')) {
            showPage1(data[0].ABeautyMakeup);
        } else {
            showPage(data[0].ABeautyMakeup);
        }
        duibi();
        xlzj = 1
        plzj = 1;
        jgzj = 1;
    });
    var xlzj = 1;
    var plzj = 1;
    var jgzj = 1;
    // 销售量
    $('.filter-sort .xl').click(function() {
        var relDatas = JSON.parse(JSON.stringify(data[0].ABeautyMakeup));
        if (xlzj == 0) {
            relDatas.sort(function(a, b) {
                return a.sales_volume - b.sales_volume
            });
            xlzj = 1;
        } else {
            relDatas.sort(function(a, b) {
                return b.sales_volume - a.sales_volume
            });
            xlzj = 0;
        }
        plzj = 1;
        jgzj = 1;
        if ($('.xiaot').hasClass('jiah')) {
            showPage1(relDatas);
        } else {
            showPage(relDatas);
        }
        duibi();
    });
    // 评论数量
    $('.filter-sort .pl').click(function() {
        var relDataspl = JSON.parse(JSON.stringify(data[0].ABeautyMakeup));
        if (plzj == 0) {
            relDataspl.sort(function(a, b) {
                return a.comment_num - b.comment_num
            });
            plzj = 1;
        } else {
            relDataspl.sort(function(a, b) {
                return b.comment_num - a.comment_num
            });
            plzj = 0;
        }
        jgzj = 1;
        xlzj = 1
        if ($('.xiaot').hasClass('jiah')) {
            showPage1(relDataspl);
        } else {
            showPage(relDataspl);
        }
        duibi();
    });
    // 价格排序
    $('.filter-sort .jg').click(function() {
        var relDatasjg = JSON.parse(JSON.stringify(data[0].ABeautyMakeup));
        if (jgzj == 0) {
            relDatasjg.sort(function(a, b) {
                return a.goods_price - b.goods_price
            });
            jgzj = 1;
        } else {
            relDatasjg.sort(function(a, b) {
                return b.goods_price - a.goods_price
            });
            jgzj = 0;
        }
        xlzj = 1
        plzj = 1;
        if ($('.xiaot').hasClass('jiah')) {
            showPage1(relDatasjg);
        } else {
            showPage(relDatasjg);
        }
        duibi();
    });
    // 仅显示有货
    $('.fcheckbox [for="store-checkbox-013"]').click(function() {
        var rel = $.map(data[0].ABeautyMakeup, function(value, index) {
            if (value.goods_number !== 0) {
                return value;
            }
        })
        if ($('.xiaot').hasClass('jiah')) {
            if ($(this).hasClass('xuanzhong')) {
                showPage1(rel);
            } else {
                showPage1(data[0].ABeautyMakeup);
            }
        } else {
            if ($(this).hasClass('xuanzhong')) {
                showPage(rel);
            } else {
                showPage(data[0].ABeautyMakeup);
            }
        }

        duibi();
    });
    // 商创自营
    $('.fcheckbox [for="store-checkbox-012"]').click(function() {
        var relDataszy = $.map(data[0].ABeautyMakeup, function(value, index) {
            if (value.rz_shop_name == "商创自营") {
                return value;
            }
        });
        if ($('.xiaot').hasClass('jiah')) {
            if ($(this).hasClass('xuanzhong')) {
                showPage1(relDataszy);
            } else {
                showPage1(data[0].ABeautyMakeup);
            }
        } else {
            if ($(this).hasClass('xuanzhong')) {
                showPage(relDataszy);
            } else {
                showPage(data[0].ABeautyMakeup);
            }
        }
    });
    // 价格区间
    $('.filter_caoz .a').click(function(e) {
            e.preventDefault();
        })
        // 触碰显示大图片
    $('.sider img').mouseover(function() {
            var srcE = $(this).attr('src')
            $(this).parents('.sider').prev().children().children().prop('src', srcE)
        })
        // 对比按钮
    function duibi() {
        $('.i_operate .li_a1').click(function(e) {
            e.preventDefault();

            var chucun = $(this).children('label').attr('for');
            var chaz = $.map(data[0].ABeautyMakeup, function(value, index) {
                if (value.goods_id == chucun) {
                    return value;
                }
            })
            if ($(this).children('label').hasClass('xuanzhong')) {
                $.map($('.parBd ul li'), function(value, index) {
                    if (value.id == chucun) {
                        value.remove();
                        return;
                    }
                });
                var hezgs = 4 - $('.n_duibi_box .geshu').length;
                $('.parBd ul .lis').last().after(`
                    <li class="geshu">
                    <dt>
                        <h1>${hezgs}</h1>
                    </dt>
                    <dd>
                        <span>您还可以继续添加</span>
                    </dd>
                </li>
                    `)
                $(this).children('label').toggleClass('xuanzhong');
                if ($('.i_operate label').hasClass('xuanzhong')) {
                    $('.n_duibi_box').removeClass('hide')
                } else {
                    $('.n_duibi_box').addClass('hide')
                    var chongz = '';
                    for (var n = 1; n <= 4; n++) {
                        chongz += `
                    <li class="geshu">
                    <dt>
                        <h1>${n}</h1>
                    </dt>
                    <dd>
                        <span>您还可以继续添加</span>
                    </dd>
                </li>
                    `;
                    }
                    $('.parBd ul').html(chongz);
                }
                return
                // $('#' + chaz).remove
            } else {
                if ($('.i_operate .xuanzhong').length == 4) {

                    alert('亲，最多只能添加四个呦~')
                    return;
                }
                var gb = ` <li class="lis" id="${chucun}">
<dt>
<a href=""><img src="${chaz[0].goods_thumb.nowurl}" alt="" width="60" height="60"></a>
</dt>
<dd>
<a href="">${chaz[0].goods_title}</a>
<div class="p-org">
    <span>¥${chaz[0].goods_price}</span>
    <a href="" id="${chucun}">删除</a>
</div>
</dd>
</li>`;
            }
            $('.parBd ul .geshu').first().remove();
            $('.parBd ul li').eq(0).before(gb);
            $(this).children('label').toggleClass('xuanzhong');
            // 对比的显示隐藏
            if ($('.i_operate label').hasClass('xuanzhong')) {
                $('.n_duibi_box').removeClass('hide')
            } else {
                $('.n_duibi_box').addClass('hide')
            };
            // 删除
            $('.p-org a').off().click(function(e) {
                    e.preventDefault();
                    $(this).parents('.lis').remove();
                    // 清除选中样式
                    var shanchu = $(this);
                    $.map($('.i_operate label'), function(value, index) {

                        if ($(value).attr('for') == shanchu.parents('.lis').attr('id')) {
                            $(value).removeClass('xuanzhong');
                        }
                        if ($('.i_operate label').hasClass('xuanzhong')) {
                            $('.n_duibi_box').removeClass('hide')
                        } else {
                            $('.n_duibi_box').addClass('hide')
                        };
                    })


                    var hezgs1 = 4 - $('.n_duibi_box .geshu').length;
                    if ($('.parBd ul .lis').length == 0) {
                        $('.parBd ul').prepend(`
                    <li class="geshu">
                    <dt>
                        <h1>${hezgs1}</h1>
                    </dt>
                    <dd>
                        <span>您还可以继续添加</span>
                    </dd>
                </li>
                    `)
                    } else {
                        $('.parBd ul .lis').last().after(`
                    <li class="geshu">
                    <dt>
                        <h1>${hezgs1}</h1>
                    </dt>
                    <dd>
                        <span>您还可以继续添加</span>
                    </dd>
                </li>
                    `)
                    }
                })
                // 清空对比栏
                // 清空后并隐藏
            $('.del-items').click(function(e) {
                    e.preventDefault();
                    var chongz = '';
                    for (var n = 1; n <= 4; n++) {
                        chongz += `
                    <li class="geshu">
                    <dt>
                        <h1>${n}</h1>
                    </dt>
                    <dd>
                        <span>您还可以继续添加</span>
                    </dd>
                </li>
                    `;
                    }
                    $('.parBd ul').html(chongz);
                    $('.i_operate label').removeClass('xuanzhong');
                    $('.n_duibi_box').addClass('hide');
                })
                // 隐藏 直接隐藏
            $('.hide-me').click(function(e) {
                e.preventDefault();
                $('.n_duibi_box').addClass('hide');
            })
        });
    }
    duibi()
        // 切换小图样式
    $('.xiaot').click(function(e) {
            $('.zhushangp').removeClass('datu');
            $('.fd').removeClass('jiah');
            $(this).addClass('jiah');
            $('.zhushangp').prop('id', 'zhushangp');
            showPage1(data[0].ABeautyMakeup);
            duibi()
        })
        // 切换大图
    $('.datu').click(function(e) {
        $('.fd').removeClass('jiah');
        $(this).addClass('jiah');
        $('.zhushangp').addClass('datu');
        $('.zhushangp').prop('id', '');
        showPage(data[0].ABeautyMakeup);
        duibi()
    })
});
// 小图函数
function showPage1(data) {
    var pageDatas1 = '';
    for (var i = 0; i < data.length; i++) {
        var tbbh = '';
        if (data[i].rz_shop_name == '商创自营') {
            tbbh = '';
        } else {
            tbbh = 'span';
        }
        pageDatas1 += ` <li class="">
        <div class="gl-i-wrap">
            <div class="col col-1">
                <div class="p-name">
                    <a href=""><img src="${data[i].goods_thumb.nowurl}" alt=""></a>
                </div>
                <div class="name">
                    <a href=""> ${data[i].goods_title}</a>
                    <div class="p-lie">
                        <div class="num">销量：${data[i].sales_volume}</div>
                        <div class="p-comm">评价：${data[i].comment_num}</div>
                    </div>
                </div>
            </div>
            <div class="col col-2">
                <div class="p-store">
                    <a href="">${data[i].rz_shop_name}</a>
                    <a href=""><span class="iconfont icon-kefu ${tbbh}"></span></a>
                </div>
            </div>
            <div class="col col-3">
                <div class="p-price">
                    <div class="i1">¥${data[i].goods_price}</div>
                    <div class="i2">¥${data[i].market_price}</div>
                </div>
            </div>
            <div class="col col-4">
                <div class="p-operate">
                    <a href="" id="compare">
                        <input type="checkbox" name="" id="duibi_643">
                        <label class="" for="duibi_643">对比</label>
                    </a>
                    <a href="" class="choose-btn-coll">
                        <span class="iconfont icon-aixin"></span> 收藏
                    </a>
                    <a href="" class="addcart">
                        <span class="iconfont icon-gouwuche"></span>加入购物
                    </a>
                </div>
            </div>
        </div>
        </li>`
    }
    $('.zhushangp>ul').html(pageDatas1);
}
// 大图函数
function showPage(data) {
    var pageDatas = '';
    for (var i = 0; i < data.length; i++) {
        var xiaot = '';
        for (var j = 0; j < data[i].goods_thumb.gallery_list.length; j++) {
            xiaot += '<li><img src="' + data[i].goods_thumb.gallery_list[j] + '" alt="" width="100%"></li>'
        }
        var tbbh = '';
        if (data[i].rz_shop_name == '商创自营') {
            tbbh = '';
        } else {
            tbbh = 'tbbh';
        }
        pageDatas += `
    <li>
        <div class="li_nav">
            <div class="l_img">
                <a href="">
                    <img src="${data[i].goods_thumb.nowurl}" alt="" width="100%">
                </a>
            </div>
            <div class="sider">
                <ul>
                    ${xiaot}
                </ul>
            </div>
            <div class="i_lie">
                <div class="i_price">¥${data[i].goods_price}</div>
                <div class="i_num">已售<em>${data[i].sales_volume}</em>件</div>
            </div>
            <div class="i_name">
                <a href="">${data[i].goods_title}</a>
            </div>
            <div class="i-store">
                <a href="">${data[i].rz_shop_name}</a>
                <a href="" class="${tbbh}"><i class="icon-kefu iconfont"></i></a>
            </div>
            <div class="label_list"></div>
            <div class="i_operate clearfix">
                <a href="" class="li_a1">
                <input type="checkbox" name="" id="${data[i].goods_id}">
                <label for="${data[i].goods_id}">对比</label> </a>
                <a href="" class="li_a2"><i class="icon-aixin iconfont"></i> 收藏</a>
                <a href="" class="li_a3"><i class="icon-gouwuche iconfont"></i>加入购物车</a>
            </div>
        </div>
    </li>`
    }
    $('.zhushangp>ul').html(pageDatas);

}
// 页面切换
$('.n_xzk .hezi').mouseover(function() {
    $('.n_xzk .yincang').removeClass("hide");
    $('.n_xzk .yincang').addClass("show");
});
$('.n_xzk .hezi').mouseleave(function() {
    $('.n_xzk .yincang').addClass("hide");
    $('.n_xzk .yincang').removeClass("show");
});
// 选择品牌的方式
$('.brand_gd .dx').click(function() {
    $('.brand_img .zf').toggleClass('hide');
    $('.brand_img .img').toggleClass('hide');
    if ($('.brand_img .zf').hasClass('hide')) {
        $('.brand_gd .dx').html('<i class="icon-tianjia_huaban iconfont"></i> 多选');
    } else {
        $('.brand_gd .dx').html('-收起');
    }
});
$('.yes_no .no').click(function() {
    $('.brand_img .zf').addClass('hide');
    $('.brand_img .img').removeClass('hide');
    if ($('.brand_img .zf').hasClass('hide')) {
        $('.brand_gd .dx').html('<i class="icon-tianjia_huaban iconfont"></i> 多选');
    } else {
        $('.brand_gd .dx').html('<i class="icon-jianhao iconfont"></i>收起');
    }
})
var ter;
$('.zf>ul li').mouseover(function() {
    $('.zf>ul li').removeClass("curr");
    $(this).addClass("curr");
    ter = $(this);
    $('.zimu_list li').each(function(index, value) {
        if ($(value).attr("brand") == ter.attr("data-key")) {
            $(value).css('display', 'block');
        } else {
            $(value).css('display', 'none');
        }
    })
    if (!ter.attr("data-key")) {
        $('.zimu_list li').css('display', 'block');
    }
});
$('.zimu_list>ul li').click(function(e) {
    e.preventDefault()
    $(this).children('span').toggleClass("span_img");
    if ($('.zimu_list>ul li').children(".span_img").length > 0) {
        $('.yes').css('display', 'block');
    } else {
        $('.yes').css('display', 'none');
    }
});
// 商品的筛选
// 销量筛选

$('.filter-sort>a').click(function(e) {
    e.preventDefault();
    $('.filter-sort>a').removeClass('h');
    $(this).addClass('h');
    if ($(this).children('i').hasClass('icon-jiantou_xiangshang_o')) {
        $(this).children('i').removeClass('icon-jiantou_xiangshang_o');
        $(this).children('i').addClass('icon-jiantou_xiangxia_o');
    } else {
        $(this).children('i').addClass('icon-jiantou_xiangshang_o');
        $(this).children('i').removeClass('icon-jiantou_xiangxia_o');
    }
    $(this).siblings().children('i').removeClass('icon-jiantou_xiangxia_o');
    $(this).siblings().children('i').addClass('icon-jiantou_xiangshang_o');
});
// 价钱选择清空区域
$('.filter_shuj [type="text"]').focus(function() {
    var timeId2 = setTimeout(function() {
        $('.filter_caoz').removeClass('hide');
    }, 101);
});
$('.filter_caoz .qingk').click(function(e) {
    e.preventDefault();
    $('.filter_shuj [type="text"]').val('')
})
$('.filter_shuj [type="text"]').blur(function() {
    var timeId2 = setTimeout(function() {
        $('.filter_caoz').addClass('hide');
    }, 100);
});
$('.checkbox_item label').click(function() {
        $(this).toggleClass('xuanzhong');
    })
    // 隐藏推荐商品
$('.biaoz').click(function() {
    $('.ceshangp').toggleClass('bianh')
    if ($('.zhushangp').css('width') == '1392px') {
        $('.ceshangp').css('right', '0');
        $('.zhushangp').css('width', '1160px');
        $(this).children('i').addClass('icon-jiantou');
        $(this).children('i').removeClass('icon-fanhuijiantou');
    } else {
        $('.ceshangp').css('right', '-221px');
        $('.zhushangp').css('width', '1392px');
        $(this).children('i').removeClass('icon-jiantou');
        $(this).children('i').addClass('icon-fanhuijiantou');
    }
});
// 取消点击大图,小console.log图后的页面刷新效果
$('.styles a').click(function(e) {
        e.preventDefault();
    })
    // 头部样式
$('.city-choice').mousemove(function() {
    $('.dorpdown-layer').css('display', 'block');
})
$('.city-choice').mouseout(function() {
    $('.dorpdown-layer').css('display', 'none');
})
$('.li_dorpdown').mousemove(function() {
    $('.layer').css('display', 'block');
})
$('.li_dorpdown').mouseout(function() {
    $('.layer').css('display', 'none');
})
$('.shopCart-con').mousemove(function() {
    $('.shangpin').css('display', 'block');
})
$('.shopCart-con').mouseout(function() {
    $('.shangpin').css('display', 'none');
});


// ----------------侧边栏通用(第一个)------------------------
var liEs = document.querySelectorAll('#quick_links ul li');
var ibar_login_box = document.querySelector('.ibar_login_box');
liEs[0].onmouseover = function() {
    ibar_login_box.style.display = 'block';
}
liEs[0].onmouseout = function() {
        ibar_login_box.style.display = 'none';
    }
    //---------------侧边栏(下面每一项)------------------------
var onEle = document.querySelectorAll('.ones');
var mp_tooltip = document.querySelectorAll('.mp_tooltip');

function side() {
    for (var i = 0; i < mp_tooltip.length; i++) {
        mp_tooltip[i].className = 'mp_tooltip';
    }
};
for (var j = 0; j < onEle.length; j++) {
    onEle[j].index = j;
    onEle[j].onmouseover = function() {
        side();
        mp_tooltip[this.index].className = 'mp_tooltip ele';
    }
    onEle[j].onmouseout = function() {
        side();
    }
}
// -------------------------------------------------------------
// 侧边栏右侧出现
var shopCart = document.querySelector('#shopCart');
var ibar_closebtn = document.querySelector('.ibar_closebtn');
var quick_links_wrap = document.querySelector('.quick_links_wrap');
shopCart.onclick = function() {
    quick_links_wrap.style.width = '320px';
}
ibar_closebtn.onclick = function() {
    quick_links_wrap.style.width = '40px';
}
$('.returnTop').click(function(e) {
    $("html").animate({
        scrollTop: 0
    }, 1000);
});
var mainOffsetTop = $("#brand").offset().top;
$(window).scroll(function(e) {
    if ($(window).scrollTop() >= mainOffsetTop) {
        $('.returnTop').addClass('show');
    } else {
        $('.returnTop').removeClass('show');
    }
});
$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 240) {
            $('.returnTop').addClass('show');

        } else {
            $('.returnTop').removeClass('show');
        }
    })
});